<template>
  <!-- v-loading.fullscreen.lock="showloading" -->
  <section id="orderrecord" >
      <el-row style="background-color: white;" class='active-wrap'>
         <el-col :span="8"> 
             <div class="navitem" @click='changeStatus("sure",$event)'>待确认</div>
         </el-col>
         <el-col :span="8"  >
             <div class="navitem navaction" @click='changeStatus("service",$event)'>待服务</div>
            </el-col>  
         <el-col :span="8"> 
             <div class="navitem" @click='changeStatus("over",$event)'>已完成</div>
         </el-col>
      </el-row> 
      <div v-if='zhanweiOff' style='height:240px;margin:150px auto;'>
           <img src="../../../static/img/no-data.png" height="100%" width="100%" alt="">
      </div>
       <div class="orderlist" v-for='(val,index) in sellerOrderList' @click='comonSellerOrInfo(val.num)'>
          <div style="line-height:40px;position:relative">
                <span>订单编号:{{val.num}}</span>
                <i :style="{
                  'display':'inline-block',
                  'position':'absolute',
                  'right':0,
                  'color':'red',
                  'font-style': 'normal'}"
                >
                  {{orderStatus(val.orderStatus)}}
                </i>
          </div> 
          <hr style="margin:0px 0px 10px 0px;border-top:1px solid #eee;">
 
          <el-row>
            <el-col :span='8'>
              <img :src="val.headimg" width="80" height="80">
            </el-col>
            <el-col :span='16' style='line-height:20px;padding-top:5px;'>
              <h3>{{val.nickname}}</h3>
              <div style="line-height:25px;">{{val.serviceName}}</div>
              <div style="color:#999;">{{date(val.createTime)}}</div>
            </el-col>
          </el-row>
 
          <!-- <hr style="margin:10px 0px 0px 0px;border-top:1px solid #eee;"> -->
 
          <el-row style='padding:8px 0;'>
            <el-col :span='15' style='line-height:28px;'>
              <strong>合计：{{val.realAmount}}</strong>
            </el-col>
          </el-row>
      </div> 
  </section>
</template>
<script>
  import {URL_MERCHANT_ORDER,AJAX} from '@/comm.js';
  export default {
    data(){
      return ({
        sellerOrderList:[],
        zhanweiOff:true,
        orderGetSta:{
          //1 3 5 可以取消订单  7 去评论  9 已取消 
          // '1':'待支付',
          '3':'待确认',
          '5':'待服务',
          '7':'已完成',
          // '9':'已取消'
        },
        //待确认数据
        readySure:[],
        //待服务数据
        readyService:[],
        //已完成数据
        over:[]
      });
    },
    created(){
      let This=this;
      AJAX({
        method:'post',
        url:URL_MERCHANT_ORDER
      },function(data){
        if(!data.data.retult||!data.data.data.length){
          This.zhanweiOff=true;
          return ;
        }
        This.zhanweiOff=false;
        console.log('商户订单列表');
        console.log(data);
        let readySure=[];
        let readyService=[];
        let over=[];
        let list=data.data.data;
        for(let i=0;i<list.length;i++){
          switch(list[i].orderStatus){
            case 3:
              readySure.push(list[i]);
              break;
            case 5:
              readyService.push(list[i]);
              break;
            case 7:
              over.push(list[i]);
          }
        }
        This.sellerOrderList=readyService;
        This.readySure=readySure;
        This.readyService=readyService;
        This.over=over;
      });
    },
    watch:{
        sellerOrderList(val,oldval){
          console.log('jinalai')
          if(!val.length){
            this.zhanweiOff=true;
          }else{
            this.zhanweiOff=false;
          }
        }
    },
    methods:{
      //根据订单状态来得到中文
      orderStatus(status){
        return this.orderGetSta[status];
      },
      //切换状态数据
      changeStatus(status,ev){
        $('.active-wrap .navaction').removeClass('navaction');
        $(ev.target).addClass('navaction');
        switch(status){
          case 'sure':
            this.sellerOrderList=this.readySure;
            break ;
          case 'service':
            this.sellerOrderList=this.readyService;
            break ;
          case 'over':
            this.sellerOrderList=this.over;
            break ;
        }
      },
      date(timestamp){
        if(!timestamp){
          return ;
        }
        var date;
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        if(timestamp.toString().length==10){
            date=new Date(Number(timestamp) * 1000);
        }else{
            date=new Date(Number(timestamp));
        }
              let Y = date.getFullYear() + '-';
              let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
              let D = date.getDate() + ' ';
              let h = date.getHours() + ':';
              let m = date.getMinutes() + ':';
              let s = date.getSeconds();
        return Y+M+D+h+m+s;
      },
      comonSellerOrInfo(num){
        this.$router.push({path:'/seller-order.html/seller-order-info',query:{num:num}});
      }
    }
  }
</script>
<style>
#orderrecord .navitem {
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  margin: auto;
  width: 70px;
  text-align: center;
}
#orderrecord .navaction {
  border-bottom: 2px solid #f1cf83;
  font-weight: bold;
}
#orderrecord > .orderlist {
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  margin-top: 10px;
}
#orderrecord > .orderlist .orderstatus {
  display: inline-block;
  float: right;
}
</style>
